<template>
  <div>
    <el-container>
      <el-header class="inside-header">
        <div >
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>出入审核</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">禁行车辆管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main>
        <div>
          <el-row style=" height: 40px">
              <el-col :span="5" style="margin-left: 20px">
              <el-form-item label="禁行开始时间" size="small">
                  <el-date-picker v-model="form.prohibitionStartTime" style="width:100%"  type="datetime" placeholder="请选择开始时间" />
              </el-form-item>
            </el-col>
            <span>-</span>
            <el-col :span="4">
              <el-form-item label="" size="small">
                  <el-date-picker v-model="form.prohibitionEndTime" style="width:93%"  type="datetime" placeholder="请选择结束时间" />
              </el-form-item>
            </el-col>
               <el-col :span="4" style="margin-left: 10px">
              <el-button size="small" class="sele-but" icon="search" @click="selectQueryTime" >查询</el-button>
              <el-button size="small" class="empty-but" icon="refresh" @click="onReset">重置</el-button>
            </el-col>
          </el-row>
        </div>
         <div style="height: 45px; display: flex; align-items: center;background:#f2f4f5;margin:0 -19.5px 0 -20px">
          <el-button size="small" icon="plus" class="add-but" @click="addDialog = true" style="margin-left:20px">新增</el-button>
           <el-button type="danger" plain size="small" icon="delete" @click="deleteAll">删除</el-button>
          <!--<el-button size="small" class="empty-but" icon="download" @click="exportExcel">导出</el-button>-->
        </div>
        <div>
          <el-table :data="tableData.rows" style="width: 100%;" height="460" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
          <el-table-column align="center" type="index" label="序号" width="50px"/>
            <el-table-column align="center" prop="prohibitionStartTime" label="禁行开始时间" width="180px" show-overflow-tooltip
             :formatter="function(row,column){ if(row.prohibitionStartTime){ return $moment(row.prohibitionStartTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <el-table-column align="center" prop="prohibitionEndTime" label="禁行结束时间" width="180px" show-overflow-tooltip
            :formatter="function(row,column){ if(row.prohibitionEndTime){ return $moment(row.prohibitionEndTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <el-table-column align="center" prop="discharge" label="禁行排放类型" width="120px" show-overflow-tooltip/>
            <el-table-column align="center" prop="remarks" label="备注" width="180px"/>
            <el-table-column align="center" prop="prohibitionNumber" label="禁行车辆清单" width="100px">
              <template #default="scope">
                <el-button link type="primary" @click="selectInventory(scope.row)">{{scope.row.prohibitionNumber}}</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="pass_status" label="状态" width="80px">
                          <template #default="scope">
                          <el-button link type="success"  v-if="scope.row.pass_status=='1'">放行</el-button>
                          <el-button link type="danger"  v-if="scope.row.pass_status=='0'">禁行</el-button>
              </template>
            </el-table-column>
             <el-table-column align="center" prop="createdBy" label="创建人" width="80px"/>
              <el-table-column align="center" prop="creationTime" label="创建时间" width="180px"
              :formatter="function(row,column){ if(row.creationTime){ return $moment(row.creationTime).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
                  <el-table-column align="center" fixed="right" label="操作"  width="200" >
              <template #default="scope">
                <el-button link type="success" icon="check" v-if="scope.row.pass_status=='0'" size="small"  @click="updateRelease(scope.row.prohibition_id)">放行</el-button>
                <el-button link type="danger"  icon="close" v-if="scope.row.pass_status=='1'" size="small" @click="updateProhibit(scope.row.prohibition_id)" >禁行</el-button>
                <!--<el-button link type="danger" icon="delete" size="small" @click="deleteRow(scope.row)" >删除</el-button >-->
                <el-button link size="small" style="color:#3780b9" icon="download" @click="ListOut(scope.row)">导出</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="margin-right:40px; display: flex; justify-content: flex-end"  v-model:current-page="queryInfo.pagenum" v-model:page-size="queryInfo.pagesize"
                         size="small"   layout="prev, pager, next, jumper,total"
           :total="queryInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </el-main>
    </el-container>
    <!--查看 禁行清单弹窗-->
<el-dialog v-model="seeDialog"  title="禁行车辆清单" width="70%" center>
<div style="width: 100%;align:center">
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="运输车辆" name="运输车辆">
          <el-table  :data="tableDataVehicleFiling" height="300" align="center" style="width: 100%" >
              <el-table-column align="center" prop="cl_cph" label="车牌号" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="sj_name" label="司机姓名" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="vehicleMessage.sj_phone" label="联系电话"  width="180px" show-overflow-tooltip/>
              <el-table-column align="center" prop="vehicleEmissions" label="排放阶段" width="180px" show-overflow-tooltip/>
              <el-table-column align="center" prop="vehicleMessage.registernDate" label="注册日期" width="180px" show-overflow-tooltip/>
              <el-table-column align="center" prop="vehicleMessage.cl_sbm" label="车辆识别代码(VIN)" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="vehicleMessage.cl_fdjhm" label="发动机号" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="sj_creater" label="创建人" width="120" />
          </el-table>
      </el-tab-pane>
      <el-tab-pane label="场内车辆" name="场内车辆">
          <el-table  :data="tableDataOnsite"  height="300" align="center" style="width: 100%" >
              <el-table-column align="center" prop="environmentalProtectionGrade" label="环保登记编码内部管理号牌" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="licensePlateColor" label="车牌颜色" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="brandModel" label="品牌型号" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="enterpriseNo" label="所属企业编号" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="vehicleEmissions" label="排放阶段" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="enterpriseName" label="企业名称" width="180px" show-overflow-tooltip/>
              <el-table-column align="center" prop="owner" label="所有人" width="180px" show-overflow-tooltip/>
              <el-table-column align="center" prop="registrationDate" label="注册日期" wwidth="180px" show-overflow-tooltip
                  :formatter="function(row,column){ if(row.registrationDate){ return $moment(row.registrationDate).format('YYYY-MM-DD')  }else{  return '' }}"/>
              <el-table-column align="center" prop="vehicleIdentificationNumber" label="车辆识别代码(VIN)" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="engineNumber" label="发动机号" width="180px" show-overflow-tooltip />
              <el-table-column align="center" prop="obdInstallation" label="是否安装OBD" width="180px" show-overflow-tooltip/>
              <el-table-column align="center" prop="vehicleFuel" label="燃料类型" width="180px" show-overflow-tooltip/>
              <el-table-column align="center" prop="sj_creater" label="创建人" width="120" />
          </el-table>
      </el-tab-pane>
      <el-tab-pane label="非道路移动机械" name="非道路移动机械">
          <el-table  :data="tableDataNonRoad" height="300" align="center" style="width: 100%" >
            <el-table-column align="center" prop="environmentalProtectionRegistrationCode" label="环保登记编码" width="180px" show-overflow-tooltip />
            <el-table-column align="center" prop="mechanicalEnvironmentalProtectionCode" label="机械环保代码" width="180px" show-overflow-tooltip />
            <el-table-column align="center" prop="machineName" label="机械名称" width="180px" show-overflow-tooltip />
            <el-table-column align="center" prop="enterpriseCode" label="所属企业编码" width="180px" show-overflow-tooltip />
            <el-table-column align="center" prop="nameOfAffiliatedEnterprise" label="所属企业名称" width="180px" show-overflow-tooltip/>
            <el-table-column align="center" prop="vehicleEmissions" label="排放阶段" width="180px" show-overflow-tooltip />
            <el-table-column align="center" prop="registrationDate" label="注册日期" width="180px" show-overflow-tooltip
              :formatter="function(row,column){ if(row.registrationDate){ return $moment(row.registrationDate).format('YYYY-MM-DD')  }else{  return '' }}"/>
            <el-table-column align="center" prop="engineNumber" label="发动机号" wwidth="180px" show-overflow-tooltip />
            <el-table-column align="center" prop="freight" label="运输货物" width="180px" show-overflow-tooltip />
            <el-table-column align="center" prop="transportWeight" label="运输量/吨" wwidth="180px" show-overflow-tooltip />
            <el-table-column align="center" prop="sj_creater" label="创建人" width="120" />
          </el-table>
        </el-tab-pane>
  </el-tabs>
</div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="empty-but" @click="seeDialog = false">关闭</el-button>
        </span>
      </template>
</el-dialog>
<!--新增弹出框-->
<el-dialog v-model="addDialog" title="添加禁行车辆" width="70%">
    <div style="width: 80%">
   <el-form  ref="ruleFormRef" :model="formData" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
      <el-form-item label="禁行时间" prop="prohibitionStartTime" style="justify-content: space-between">
        <el-date-picker v-model="formData.prohibitionStartTime" style="width:200px"  type="datetime" placeholder="请选择开始时间" />
         <span style="margin:5px">至</span>
           <el-date-picker v-model="formData.prohibitionEndTime"  type="datetime" style="width:200px" placeholder="请选择结束时间"/>
       </el-form-item>
        <el-form-item required label="禁行类型" prop="Check">
           <el-checkbox-group v-model="checkList" @change="checkListData">
               <el-checkbox label="国0" name="Check"/>
               <el-checkbox label="国Ⅰ" name="Check"/>
               <el-checkbox label="国Ⅱ" name="Check"/>
               <el-checkbox label="国Ⅲ" name="Check"/>
               <el-checkbox label="国Ⅳ" name="Check"/>
               <el-checkbox label="国Ⅴ" name="Check"/>
               <el-checkbox label="国Ⅵ" name="Check"/>
               <el-checkbox label="新能源" name="Check" />
           </el-checkbox-group>
        </el-form-item>
         <el-form-item label="备注" prop="remarks">
                <el-input v-model="formData.remarks" maxlength="500" placeholder="请输入" show-word-limit type="textarea" />
            </el-form-item>
        </el-form>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="insert(formData)"> 确定 </el-button>
          <el-button class="empty-but" @click="addDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>

  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {
  selectprohibitedVehiclesnumber,
  insertProhibitedVehicles,
  selectProhibitedVehicles,
  deleteProhibitedVehicles,
  updateProhibitedVehicles,
  prohibitedVehicles
} from "@/api/BasicAccessAudit";
import { ElMessage, ElMessageBox,TabsPaneContext  } from "element-plus";
import moment from "moment";
import * as XLSX from 'xlsx'
import {prohibitedListOut} from "@/api/leadingOut";
import { dleteAllprohibitedVehicles } from "../../../../api/BasicAccessAudit";
const router = useRouter()
const tableData = reactive({
  rows:[],
  total:0,
});
const form = reactive({})
const formData = reactive({
  discharge:"",
  prohibitionStartTime:"",
  prohibitionEndTime:"",
  remarks:"",
})
onMounted(() => {
  selectQuery();
});
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const deleteAll = () => {
  if(multipleSelection.value.length == 0){
    ElMessage.error("请选择要删除的数据")
  }else {
    ElMessageBox.confirm("确定要删除吗?").then(() => {
      dleteAllprohibitedVehicles(multipleSelection.value).then((res) => {
        if (res.code == 200){
          ElMessage.success("删除成功")
          selectQuery()
        }else {
          ElMessage.error("删除失败")
        }
      })
    })
  }
}
//查询所有
// const selectAll = () => {
//   selectprohibitedVehiclesnumber({pageNum:queryInfo.pagenum,pageSize:queryInfo.pagesize}).then((res) => {
//     tableData.rows = res.data
//     queryInfo.total=res.data.total;
//         // if (res.code == 200) {
//     //   tableData.value = res.data;
//     //   queryInfo.total=res.data.total;
//     // } else {
//     // }
//   });
// };
//分页
const queryInfo = reactive({
  pagenum:1,
  pagesize:10,
  total:0
})
const handleSizeChange = (val) => {
  queryInfo.pagesize = val
  selectQuery()
}
//点击第几页
const handleCurrentChange = (val) => {
  queryInfo.pagenum = val
  selectQuery()
}
// tabs页
const activeName = ref('运输车辆')
const handleClick = (tab, event) => {
  console.log(tab, event)
}
//搜索查询
const selectQuery = () => {
  form.pageSize = queryInfo.pagesize
  form.pageNum = queryInfo.pagenum
  if(form.prohibitionStartTime){
    form.prohibitionStartTime = moment(form.prohibitionStartTime).format('YYYY-MM-DD HH:mm:ss')
  }
  if (form.prohibitionEndTime){
    form.prohibitionEndTime = moment(form.prohibitionEndTime).format('YYYY-MM-DD HH:mm:ss')
  }
    selectprohibitedVehiclesnumber(form).then((res) => {
      if (res.code == 200) {
        tableData.rows = res.data.list
        queryInfo.total=res.data.total;
      } else {
      }
    });
};

const selectQueryTime = () => {
  form.pageSize = queryInfo.pagesize
  form.pageNum = queryInfo.pagenum
  if(form.prohibitionStartTime){
    form.prohibitionStartTime = moment(form.prohibitionStartTime).format('YYYY-MM-DD HH:mm:ss')
  }
  if (form.prohibitionEndTime){
    form.prohibitionEndTime = moment(form.prohibitionEndTime).format('YYYY-MM-DD HH:mm:ss')
  }
  if(form.prohibitionStartTime && form.prohibitionEndTime){
    selectprohibitedVehiclesnumber(form).then((res) => {
      if (res.code == 200) {
        tableData.rows = res.data.list
        queryInfo.total=res.data.total;
      } else {
      }
    });
  }else{
    ElMessage.error("请填写开始时间及结束时间")
  }
}
const clearForm = () => {
  formData.prohibitionStartTime = ""
  formData.prohibitionEndTime = ""
  formData.remarks = ""
  checkList.value=[]
}
// 重置
const onReset = () => {
  form.prohibitionStartTime = "";
  form.prohibitionEndTime = "";
  selectQuery()
};
//删除
const deleteRow = (row) => {
 ElMessageBox.confirm("确定要删除吗?").then(()=>{
   deleteProhibitedVehicles(row).then((res)=>{
     selectQuery()
   })
 })
}
//更改禁行状态
const updateProhibit = (index) => {
  ElMessageBox.confirm("确定要禁行该车辆吗?").then(()=>{
    updateProhibitedVehicles({prohibition_id:index,pass_status:'0'}).then((res)=>{
      selectQuery()
    })
  })
}
//更改放行状态
const updateRelease = (index) => {
  ElMessageBox.confirm("确定要放行该车辆吗?").then(()=>{
    updateProhibitedVehicles({prohibition_id:index,pass_status:'1'}).then((res)=>{
      selectQuery()
    })
  })
}
//新增弹窗多选
const checkList = ref([])
let newArr = []
let checkArr = []
let Check = []
const checkListData  = () => {
  checkList.value.forEach((item)=>{
    if (!newArr.includes(item)) {
      newArr.push(item)
    }
    let a =[ ...new Set(newArr)]
    checkArr = a.join(",")
  })
}
//新增方法
//新增弹窗
const ruleFormRef = ref()
const addDialog = ref(false);
const insert = () => {
  if (!formData) return
  ruleFormRef.value.validate(valid=>{
    if (valid || checkList) {
      if(formData.prohibitionStartTime){
        formData.prohibitionStartTime = moment(formData.prohibitionStartTime).format('YYYY-MM-DD HH:mm:ss')
      }
      if(formData.prohibitionStartTime){
        formData.prohibitionEndTime = moment(formData.prohibitionEndTime).format('YYYY-MM-DD HH:mm:ss')
      }
      if(formData.prohibitionEndTime == 'Invalid date'){
         ElMessage.error("请填写禁行结束时间")
      } else {
        formData.discharge = checkArr
        formData.createdBy = localStorage.getItem('number')
        insertProhibitedVehicles(formData).then((res)=>{
          if (res.code == 200){
            selectQuery()
            clearForm()
            addDialog.value = false
            ElMessage.success("新增成功")
            onReset()
          }else{
            ElMessage.error("新增失败")
          }
        })
      }
    }else{
      ElMessage.error("请填写必填项")
    }

  })
}

//禁行清单
const seeDialog = ref(false)
const tableDataVehicleFiling = ref([]);
const tableDataOnsite  = ref([]);
const tableDataNonRoad  = ref([]);
const selectInventory = (row) => {
  seeDialog.value = true
  tableDataVehicleFiling.value = row.prohibitedVehicles
  tableDataOnsite.value = row.onSiteVehicleFilingForm
  tableDataNonRoad.value = row.nonRoadMobileMachineryFiling
}

//导出事件
let table = reactive({
  rows: [],
  total: 0

});
//导出英文(数据库字段)
// const exportExcel = ()=>{
//   const data = XLSX.utils.json_to_sheet(tableData.rows)//此处tableData.value为表格的数据
//   const wb = XLSX.utils.book_new()
//   XLSX.utils.book_append_sheet(wb,data,'test-data')//test-data为自定义的sheet表名
//   XLSX.writeFile(wb,'禁行车辆管理.xlsx')//test.xlsx为自定义的文件名
//
// }
const ListOut = (row) => {
  // prohibitedListOut({prohibition_id:index}).then((res)=>{
  //   out.value = res.data
  //   outVehicles.value = res.data[0].prohibitedVehicles
  //   outOnsite.value = res.data[0].onSiteVehicleFilingForm
  //   outNonRoad.value = res.data[0].nonRoadMobileMachineryFiling
    exportExcel(JSON.parse(JSON.stringify(row)))
  // })
}
//导出工序(中文)
const out = ref()
const outVehicles = ref()
const outOnsite = ref()
const outNonRoad = ref()
const exportExcel = (row) => {
  ElMessageBox.confirm("确定要导出该条数据吗?").then(()=>{
  //禁行车辆表面导出数据结构构造
    let exportData = []
    row.pass_status = row.pass_status == '0'?'放行':'禁行'
    exportData.push({
      prohibitionStartTime: row.prohibitionStartTime? row.prohibitionStartTime : '',
      prohibitionEndTime: row.prohibitionEndTime ? row.prohibitionEndTime : '',
      discharge: row.discharge ? row.discharge : '',
      remarks: row.remarks ? row.remarks : '',
      pass_status: row.pass_status ? row.pass_status : '' ,
      createdBy: row.createdBy ? row.createdBy :'',
      creationTime: row.creationTime ? row.creationTime : '',
    })
  //导出表头设计
  let head = {
    prohibitionStartTime: '禁行开始时间',
    prohibitionEndTime: '禁行结束时间',
    discharge: '禁行排放类型',
    remarks: '备注',
    pass_status: '禁行状态',
    createdBy:'创建人',
    creationTime: '创建时间'
  }
  //表头数据切换
  const list = exportData.map(item => {
    const obj = {}
    for (const k in item) {
      if (head[k]) {
        obj[head[k]] = item[k]
      }
    }
    return obj
  })
    console.log(row.prohibitedVehicles)
    //运输车辆导出数据结构构造
    let exportDataVehicles = []
    row.prohibitedVehicles.forEach(item => {
      exportDataVehicles.push({

        cl_cph: item.cl_cph ? item.cl_cph : '',
        sj_name: item.sj_name ? item.sj_name : '',
        sj_phone: item.vehicleMessage.sj_phone ? item.vehicleMessage.sj_phone : '',
        vehicleEmissions: item.vehicleEmissions ? item.vehicleEmissions : '',
        registernDate: item.vehicleMessage.registernDate ? item.vehicleMessage.registernDate : '',
        cl_sbm: item.vehicleMessage.cl_sbm ? item.vehicleMessage.cl_sbm : '',
        cl_fdjhm:item.vehicleMessage.cl_fdjhm ? item.vehicleMessage.cl_fdjhm : '',
        sj_creater: item.sj_creater ? item.sj_creater : ''
      })
    })
    //导出表头设计
    let headVehicles = {
      cl_cph: '车牌号',
      sj_name: '司机姓名',
      sj_phone: '联系电话',
      vehicleEmissions: '排放阶段',
      registernDate: '注册日期',
      cl_sbm: '车辆识别代码(VIN)',
      cl_fdjhm: '发动机号',
      sj_creater: '创建人',
    }
    //表头数据切换
    const listVehicles = exportDataVehicles.map(item => {
      const objVehicles = {}
      for (const k in item) {
        if (headVehicles[k]) {
          objVehicles[headVehicles[k]] = item[k]
        }
      }
      return objVehicles
    })


    //场内车辆导出数据结构构造
    let exportDataOnsite = []
    row.onSiteVehicleFilingForm.forEach(item => {
      exportDataOnsite.push({
        environmentalProtectionGrade: item.environmentalProtectionGrade ? item.environmentalProtectionGrade : '',
        licensePlateColor: item.licensePlateColor ? item.licensePlateColor : '',
        brandModel: item.brandModel ? item.brandModel : '',
        enterpriseNo: item.enterpriseNo ? item.enterpriseNo : '',
        enterpriseName: item.enterpriseName ? item.enterpriseName : '',
        vehicleEmissions: item.vehicleEmissions ? item.vehicleEmissions : '',
        owner: item.owner ? item.owner : '',
        registrationDate: item.registrationDate ? item.registrationDate : '',
        vehicleIdentificationNumber: item.vehicleIdentificationNumber ? item.vehicleIdentificationNumber : '',
        engineNumber: item.engineNumber ? item.engineNumber : '',
        obdInstallation: item.obdInstallation ? item.obdInstallation : '',
        vehicleFuel: item.vehicleFuel ? item.vehicleFuel : '',
        sj_creater: item.sj_creater ? item.sj_creater : ''
      })
    })
    //导出表头设计
    let headOnsite = {
      environmentalProtectionGrade: '环保登记编码内部管理号牌',
      licensePlateColor:'车牌颜色',
      brandModel:'品牌型号',
      enterpriseNo:'所属企业编码',
      enterpriseName:'企业名称',
      vehicleEmissions:'排放阶段',
      owner:'所有人',
      registrationDate:'注册日期',
      vehicleIdentificationNumber:'车辆识别代码(VIN)',
      engineNumber:'发动机号',
      obdInstallation:'是否安装OBD',
      vehicleFuel:'燃料类型',
      sj_creater:'创建人',

    }
    //表头数据切换
    const listOnsite = exportDataOnsite.map(item => {
      const objOnsite = {}
      for (const k in item) {
        if (headOnsite[k]) {
          objOnsite[headOnsite[k]] = item[k]
        }
      }
      return objOnsite
    })

    //非道路移动机械导出数据结构构造
    let exportDataNonRoad = []
    row.nonRoadMobileMachineryFiling.forEach(item => {
      exportDataNonRoad.push({
        environmentalProtectionRegistrationCode: item.environmentalProtectionRegistrationCode? item.environmentalProtectionRegistrationCode : '',
        mechanicalEnvironmentalProtectionCode:item.mechanicalEnvironmentalProtectionCode ? item.mechanicalEnvironmentalProtectionCode : '',
        machineName: item.machineName ? item.machineName : '',
        enterpriseCode: item.enterpriseCode ? item.enterpriseCode : '',
        nameOfAffiliatedEnterprise: item.nameOfAffiliatedEnterprise ? item.nameOfAffiliatedEnterprise : '',
        vehicleEmissions: item.vehicleEmissions ? item.vehicleEmissions : '',
        registrationDate: item.registrationDate ? item.registrationDate : '',
        engineNumber: item.engineNumber ? item.engineNumber : '',
        freight: item.freight ? item.freight : '',
        transportWeight: item.transportWeight ? item.transportWeight : '',
        sj_creater: item.sj_creater ? item.sj_creater :''
      })
    })
    //导出表头设计
    let headNonRoad = {
      environmentalProtectionRegistrationCode: '环保登记编码',
      mechanicalEnvironmentalProtectionCode: '机械环保代码',
      machineName:'机械名称',
      enterpriseCode: '所属企业编码',
      nameOfAffiliatedEnterprise: '所属企业名称',
      vehicleEmissions: '排放阶段',
      registrationDate: '注册日期',
      engineNumber: '发动机号',
      freight: '运输货物',
      transportWeight: '运输量/吨',
      sj_creater: '创建人',
    }
    //表头数据切换
    const listNonRoad = exportDataNonRoad.map(item => {
      const objNonRoad = {}
      for (const k in item) {
        if (headNonRoad[k]) {
          objNonRoad[headNonRoad[k]] = item[k]
        }
      }
      return objNonRoad
    })


    // 创建工作表
  const data = XLSX.utils.json_to_sheet(list)
  const dataVehicles = XLSX.utils.json_to_sheet(listVehicles)
  const dataOnsite = XLSX.utils.json_to_sheet(listOnsite)
  const dataNonRoad = XLSX.utils.json_to_sheet(listNonRoad)
  // 创建工作簿
  const wb = XLSX.utils.book_new()
  // 将工作表放入工作簿中
  XLSX.utils.book_append_sheet(wb, data, 'data')
  XLSX.utils.book_append_sheet(wb, dataVehicles, '运输车辆')
  XLSX.utils.book_append_sheet(wb, dataOnsite, '场内车辆')
  XLSX.utils.book_append_sheet(wb, dataNonRoad, '非道路移动机械')
  // 生成文件并下载
  XLSX.writeFile(wb, '禁行车辆管理.xlsx')
  })
}
const validateTime =() =>{
  return (rule,value,callback)=>{
    if(formData.prohibitionEndTime&&formData.prohibitionStartTime&&formData.prohibitionEndTime<formData.prohibitionStartTime){
      callback(new Error("开始时间要早于结束时间."))
    }else{
      callback();
    }
  }
}
//校验
const rules = {
  prohibitionStartTime:[{
    required: true,
    validator:validateTime(),
    trigger: "change",
  }],
  prohibitionEndTime:[{
    required: true,
    validator:validateTime(),
    trigger: "change",
  }],
  Check:[{
  required: true,
    type: 'array',
  message: "请选择禁行类型",
  trigger: "change",
}],
  remarks:[{
    required: true,
    message: "请填写备注",
    trigger: "blur",
  }]
}

</script>

<style scoped>
/* 面包屑字体颜色更改 */

.breadcrumbColor >>> .el-breadcrumb__inner {
  color: #000;
}
/* 内部header */

.inside-header {
  height: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background:#f2f4f5
}
/* 实心按钮背景样式 */

.sele-but {
  background: #3780b9;
  border: 0px;
  border-radius: 2px;
  color: white;
}
/* 空心按钮样式 */

.empty-but {
  border: 1px solid #3780b9;
  color: #3780b9;
}
/*新增按钮样式*/
.add-but {
  background: #dde5fe;
  color: #3780b9;
}
/*照片弹窗及图片样式*/
.photoImg{
  vertical-align: middle;width:500px;height:400px;margin:auto
}
.photoDiv{
  width:100%;display:flex
}
</style>
